<template>
  <div>
    <div>
      <el-upload
        :file-list="fileList"
        :auto-upload="false"
        :on-change="change"
        multiple
        :on-remove="remove"
        class="avatar-uploader"
        action="http://47.106.222.181:9990/work/photo/add"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        list-type="picture"
      >
        <div class="tip">
          <el-button size="mini" type="primary" plain>上传</el-button>
          <!-- <span class="text"> 支持jpg /jpeg/ png格式， 不超过2M </span> -->
        </div>
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        -->
      </el-upload>
    </div>
    <!-- <div class="picturebox">
      <div class="image-box" v-for="(item, index) in showList" :key="index">
        <span class="close" @click="remove(item)">
          <span class="el-icon-error"> </span>
        </span>
        <el-image style="width: 100%" :src="item.url"></el-image>
      </div>
    </div> -->

    <!-- <footer class="footer">
      <el-button @click="close">取消</el-button>
    </footer> -->
  </div>
</template>

<script>
import { getPhotoAddApi } from "@/wss/newApi_3-24/imageAdmin.js";
export default {
  props: {
    //   对话框显示
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    labelId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      fileList: [],
      base64List: [],
      imageUrl: "",
      // 预览图片
      showList: [],
      // 文件列表
      paramsList: [],
      preview: {
        src: "",
      },
    };
  },
  methods: {
    readAsDataURLFn(file, id) {
      // let base64 = undefined;
      var reader = new FileReader();
      reader.addEventListener(
        "load",
        () => {
          this.base64List.push({ base64: reader.result, uid: id });
        },
        false
      );

      if (file) {
        reader.readAsDataURL(file);
      }
    },

    // 上传图片
    async confirem() {
      let s = new Set(["jpg", "jpeg", "png"]);
      let { paramsList, base64List } = this;
      console.log(paramsList, "限制");
      if (paramsList.length > 30) {
        this.$message({
          message: "最大一次只可以上传30张",
          type: "warning",
        });
        return;
      }
      // 长度为0时直接退出
      if (paramsList.length == 0) {
        this.$message({
          message: "上传不可以为空哦",
          type: "warning",
        });
        return;
      }
      let i = 0;
      let length = paramsList.length;

      // 数据转换
      do {
        console.log(paramsList[i].size);
        // 判断是否大于2M
        if (paramsList[i].size >= 2097152) {
          this.$message({
            message: "不可以大于2M",
            type: "warning",
          });
          return;
        }
        paramsList[i].labelId = this.labelId;
        paramsList[i].format = "." + paramsList[i].name.split(".")[1];
        paramsList[i].name = paramsList[i].name.split(".")[0];
        // 判断格式
        if (!s.has(paramsList[i].format.split(".")[1])) {
          this.$message({
            message: "格式不支持",
            type: "warning",
          });
          return;
        }
        // 文字超过60就不可上传
        if (paramsList[i].name.length > 60) {
          this.$message({
            message: "图片名字不可以超过60",
            type: "warning",
          });
          return;
        }
        base64List.forEach((v) => {
          if (paramsList[i].uid == v.uid) {
            paramsList[i].base64 = v.base64.split(",")[1];
          }
        });
        i++;
        length--;
      } while (length > 0);

      let { code, msg } = await getPhotoAddApi(paramsList);
      if (code == 200) {
        this.$emit("on-getPictrue", "upload", this.labelId);
        this.close();

        this.$message({
          message: msg,
          type: "success",
        });
      }
      this.fileList = [];
    },
    // 上传改变时，用于展现
    change(file) {
      // 预览
      this.showList.push({ id: file.uid, url: URL.createObjectURL(file.raw) });
      this.readAsDataURLFn(file.raw, file.uid);
      this.paramsList.push(file);
      var reader = new FileReader();
    },
    handleClose(done) {},

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 去除预览图片
    remove(file) {
      const _this = this;

      let paramsList = _this.paramsList;
      // 删除指定的某一项

      this.paramsList = paramsList.filter((v) => v.uid != file.uid);
    },
    beforeAvatarUpload(file) {
      console.log(file, "这是类型");
      return;
      console.log(URL.createObjectURL(file), "从难道北");
      //   let obj = {url:new Object.createObjectURL}
      //   this.showList.push(file);
      //   const isJPG = file.type === "image/jpeg";
      //   const isLt2M = file.size / 1024 / 1024 < 2;

      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      //   if (!isLt2M) {
      //     this.$message.error("上传头像图片大小不能超过 2MB!");
      //   }
      //   return isJPG && isLt2M;
    },
    // 关闭
    close() {
      this.$emit("update:dialogVisible", false);
      this.showList = [];
      this.paramsList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.imageBody > * {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
.selectImage {
  height: 100%;
  width: 100%;
}
::v-deep .avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
::v-deep .el-upload .el-upload--text {
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.picturebox {
  display: flex;
  flex-wrap: wrap;
}
.text {
  margin-left: 10px;
  color: #999999;
  // position: absolute;
  // position: absolute;
  // z-index: 10;
  // width: 164px;
  // left: 10px;
  // bottom: 26px;
  // z-index: 10;
  font-size: 12px;
}
.image-box {
  width: 178px;
  height: 100px;

  margin-top: 30px;
  margin-right: 30px;
  box-sizing: border-box;
  position: relative;
  .close {
    position: absolute;
    right: -12px;
    z-index: 2;
    top: -11px;
  }
}
.footer {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
</style>